<template>
    <li class='list-item fx-h-c'>
        <span class="name">
            {{item.name}}
        </span>
        <span class="count">{{item.count}}</span>
    </li>
</template>

<script>
    export default {
        name: 'ListItem',
        props: {
            item: {
                type: Object,
                default: () => ({})
            }
        }
    }
</script>

<style lang="scss" scoped>
.list-item {
    justify-content: space-between;
    padding: 2rem 0;
    border-top: 1px solid #eaeaea;
    .name {
        width: 10rem;
    }
    .count {
        font-weight: bold;
    }
    &:last-child {
        border-bottom: 1px solid #eaeaea;
    }
}
</style>